<template>
    <div id="classify">
        <PageTitle>全部产品分类</PageTitle>
        <div class="pages-top pages-scroll">
            <Search placeholder="搜索你想要的产品" :autoFixed="false"></Search>
            <div class="tea-item" v-for="(c,i) in classify" :key="i">
                <h3>{{c.classifyName}}</h3>
                <div class="tea-flxd">
                    <router-link :to="'/'+c.classifyName+'/'+e.teaName"  v-for="(e,j) in c.tea" :key="j">
                        <div>
                            <img :src="e.img">
                            <h4>{{e.teaName}}</h4>
                        </div>
                    </router-link>
                </div>
            </div>
        </div>
        <Tabbar></Tabbar>
    </div>
</template>
<script>
import PageTitle from "../components/PageTitle.vue";
import Tabbar from "../components/Tabbar.vue";
import {Search} from "vux";
import {mapState} from "vuex";
export default {
    components:{PageTitle,Tabbar,Search},
    mounted(){
        this.$store.dispatch("requestClassify");
    },
    computed:{
        ...mapState([
            "classify"
        ])
    }
}
</script>
<style scoped>
    #classify{
        background-color: #f4f4f4;
        height: 100vh;
    }
    .tea-item{
        margin-top: 2.8vw;
        
        text-align: center;
    }
    .tea-flxd{
        display: flex;
        flex-wrap: wrap;
        background-color: white;
        margin: 2.8vw 0;
        
    }
    .tea-flxd div{
        width: 33.3333vw;
        height: 33.3333vw;
        border: #E0E0E0 0.5px solid;
        border-collapse: collapse;
        
    }
    h4{
        padding: 0;
        margin: 0;
        font-weight: normal;
        font-size: 3.92vw;
        
    }
    img{
        width:14vw ;
        height: 14vw;
        margin-top: 8.4vw;
    }
</style>